<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub风格聊天界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f6f8fa;
            color: #24292e;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        .chat-container {
            width: 100%;
            max-width: 900px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 85vh;
        }
        
        .chat-header {
            padding: 16px 20px;
            background: #f6f8fa;
            border-bottom: 1px solid #e1e4e8;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .chat-title {
            font-size: 18px;
            font-weight: 600;
            color: #0366d6;
        }
        
        .chat-header-actions {
            display: flex;
            gap: 12px;
        }
        
        .btn {
            padding: 6px 12px;
            background: white;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            color: #24292e;
            transition: all 0.2s;
        }
        
        .btn:hover {
            background: #f6f8fa;
        }
        
        .btn-primary {
            background: #0366d6;
            color: white;
            border: 1px solid #0366d6;
        }
        
        .btn-primary:hover {
            background: #0256b9;
        }
        
        .chat-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .message {
            display: flex;
            gap: 12px;
            max-width: 80%;
        }
        
        .message.received {
            align-self: flex-start;
        }
        
        .message.sent {
            align-self: flex-end;
            flex-direction: row-reverse;
        }
        
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e1e4e8;
            flex-shrink: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #6a737d;
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .message-content {
            background: #f6f8fa;
            padding: 12px 16px;
            border-radius: 18px;
            border: 1px solid #e1e4e8;
            position: relative;
        }
        
        .message.sent .message-content {
            background: #0366d6;
            color: white;
            border: none;
        }
        
        .message-info {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
            gap: 8px;
        }
        
        .message-sender {
            font-weight: 600;
            font-size: 14px;
        }
        
        .message-time {
            font-size: 12px;
            color: #6a737d;
        }
        
        .message.sent .message-time {
            color: rgba(255, 255, 255, 0.8);
        }
        
        .message-text {
            font-size: 15px;
            line-height: 1.5;
        }
        
        .chat-footer {
            padding: 16px 20px;
            border-top: 1px solid #e1e4e8;
            background: #f6f8fa;
        }
        
        .message-input {
            display: flex;
            gap: 12px;
        }
        
        .input-field {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            font-size: 15px;
            resize: none;
            height: 80px;
            outline: none;
            transition: border 0.2s;
        }
        
        .input-field:focus {
            border-color: #0366d6;
            box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
        }
        
        .send-btn {
            align-self: flex-end;
            padding: 10px 20px;
            background: #0366d6;
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .send-btn:hover {
            background: #0256b9;
        }
        
        .typing-indicator {
            font-size: 14px;
            color: #6a737d;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .typing-dots {
            display: flex;
            gap: 4px;
        }
        
        .typing-dot {
            width: 6px;
            height: 6px;
            background: #6a737d;
            border-radius: 50%;
            animation: typingAnimation 1.4s infinite ease-in-out;
        }
        
        .typing-dot:nth-child(1) { animation-delay: 0s; }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes typingAnimation {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }
        
        @media (max-width: 768px) {
            .message {
                max-width: 90%;
            }
            
            .chat-container {
                height: 95vh;
            }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <div class="chat-title">
                <i class="fas fa-comments"></i> GitHub 团队讨论
            </div>
            <div class="chat-header-actions">
                <button class="btn"><i class="fas fa-users"></i> 成员</button>
                <button class="btn"><i class="fas fa-cog"></i> 设置</button>
                <button class="btn btn-primary"><i class="fas fa-plus"></i> 新讨论</button>
            </div>
        </div>
        
        <div class="chat-body">
            <div class="message received">
                <div class="avatar">
                    <img src="https://avatars.githubusercontent.com/u/583231?v=4" alt="octocat">
                </div>
                <div class="message-content">
                    <div class="message-info">
                        <span class="message-sender">octocat</span>
                        <span class="message-time">14:32</span>
                    </div>
                    <div class="message-text">
                        大家好！欢迎来到GitHub风格聊天界面。这是一个模拟GitHub设计风格的聊天UI。
                    </div>
                </div>
            </div>
            
            <div class="message sent">
                <div class="avatar">YK</div>
                <div class="message-content">
                    <div class="message-info">
                        <span class="message-sender">youki</span>
                        <span class="message-time">14:35</span>
                    </div>
                    <div class="message-text">
                        这个设计看起来很棒！我很喜欢GitHub的简洁风格。
                    </div>
                </div>
            </div>
            
            <div class="message received">
                <div class="avatar">
                    <img src="https://avatars.githubusercontent.com/u/583231?v=4" alt="octocat">
                </div>
                <div class="message-content">
                    <div class="message-info">
                        <span class="message-sender">octocat</span>
                        <span class="message-time">14:36</span>
                    </div>
                    <div class="message-text">
                        谢谢！我尝试使用了GitHub的配色方案和设计元素，比如蓝色主题、圆角边框和简洁的布局。
                    </div>
                </div>
            </div>
            
            <div class="message received">
                <div class="avatar">DT</div>
                <div class="message-content">
                    <div class="message-info">
                        <span class="message-sender">devteam</span>
                        <span class="message-time">14:38</span>
                    </div>
                    <div class="message-text">
                        我们还可以添加一些代码片段功能，就像GitHub那样：
                        <pre style="background: #f6f8fa; padding: 12px; border-radius: 6px; margin-top: 8px; border: 1px solid #e1e4e8; overflow-x: auto;">
function greeting() {
    console.log("Hello, GitHub Chat!");
}</pre>
                    </div>
                </div>
            </div>
            
            <div class="message sent">
                <div class="avatar">YK</div>
                <div class="message-content">
                    <div class="message-info">
                        <span class="message-sender">youki</span>
                        <span class="message-time">14:40</span>
                    </div>
                    <div class="message-text">
                        太好了！这真的很符合开发者的需求。我们可以用它来讨论项目问题。
                    </div>
                </div>
            </div>
            
            <div class="typing-indicator">
                <span>octocat 正在输入</span>
                <div class="typing-dots">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
            </div>
        </div>
        
        <div class="chat-footer">
            <div class="message-input">
                <textarea class="input-field" placeholder="输入消息..."></textarea>
                <button class="send-btn">发送</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatBody = document.querySelector('.chat-body');
            const messageInput = document.querySelector('.input-field');
            const sendButton = document.querySelector('.send-btn');
            
            // 自动滚动到底部
            chatBody.scrollTop = chatBody.scrollHeight;
            
            // 发送消息功能
            sendButton.addEventListener('click', sendMessage);
            messageInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            function sendMessage() {
                const message = messageInput.value.trim();
                if (message) {
                    const now = new Date();
                    const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
                    
                    const messageElement = document.createElement('div');
                    messageElement.className = 'message sent';
                    messageElement.innerHTML = `
                        <div class="avatar">YK</div>
                        <div class="message-content">
                            <div class="message-info">
                                <span class="message-sender">youki</span>
                                <span class="message-time">${time}</span>
                            </div>
                            <div class="message-text">${message.replace(/\n/g, '<br>')}</div>
                        </div>
                    `;
                    
                    chatBody.insertBefore(messageElement, document.querySelector('.typing-indicator'));
                    messageInput.value = '';
                    chatBody.scrollTop = chatBody.scrollHeight;
                }
            }
        });
    </script>
</body>
</html>